<template>
  <yd-infinitescroll class="m-collect-shoplist" :callback="loadList" ref="infiniteScroll">
    <w-empty slot="list" v-if="!storeList.length"></w-empty>
    <div slot="list" v-else>
      <yd-list theme="4">
        <yd-list-item v-for="(store, index) in storeList" :key="index" @click.native="$router.push(`/shop/${store.storeId}`)">
          <img slot="img" v-lazy="store.storePhoto">
          <span slot="title">{{store.storeName}}</span>
          <yd-list-other slot="other">
            <div>主营行业：{{store.mainIndustry}}</div>
            <yd-icon name="delete" size=".4rem" @click.native="onDelete(store.id)"></yd-icon>
          </yd-list-other>
        </yd-list-item>
      </yd-list>
    </div>
    <!-- 数据全部加载完毕显示 -->
    <span slot="doneTip">啦啦啦，啦啦啦，没有数据啦~~</span>
    <!-- 加载中提示，不指定，将显示默认加载中图标 -->
    <p slot="loadingTip">加载中...</p>
  </yd-infinitescroll>
</template>

<script>
  import { apiFavoriteStore, apiDelFavoriteStore } from 'js/api'
  import { mapGetters } from 'vuex'

  export default {
    data() {
      return {
        storeList: [],
        curPage: 1
      }
    },
    created() {
      this.fetchFavoriteStore()
    },
    methods: {
      fetchFavoriteStore() {
        apiFavoriteStore(this.token, this.curPage).then(data => {
          this.storeList = this.storeList.concat(data.favoriteList)
          if (this.curPage >= data.totalPage) {
            this.$refs.infiniteScroll.$emit('ydui.infinitescroll.loadedDone')
            return
          }
          this.$refs.infiniteScroll.$emit('ydui.infinitescroll.finishLoad')
          this.curPage++
        })
      },
      loadList() {
        this.fetchFavoriteStore()
      },
      onDelete(id) {
        this.$dialog.confirm({
          title: '提示',
          mes: '确认删除此店铺',
          opts: () => {
            apiDelFavoriteStore(this.token, [id]).then(data => {
              this.storeList.forEach((data, index) => {
                if (data.storeId == id) {
                  this.storeList.splice(index, 1)
                }
              })
            })
          }
        })
      }
    },
    computed: {
      ...mapGetters(['token'])
    }
  }
</script>

<style lang="scss">
  .m-collect-shoplist {
  }
</style>